// 弹出检测项目

<template>
    <ul class="treeMenu">
        <li v-for="(item, index) in data" :key="item[props.key]">
            <div class="tree-item">
                <div class="tree-item-left">
                    <i
                        v-show="item[props.children]"
                        :class="['triangle', carets[tapScopes[index]]]"
                        @click="changeStatus(index)"
                    />
                    <p
                        :class="[
                            'treeNode',
                            { 'treeNode--select': item.onSelect },
                        ]"
                    >
                        <span class="title" @click="changeStatus(index)">
                            {{ item[props.label] }}
                        </span>
                        <van-checkbox
                            :name="item[props.key]"
                            shape="square"
                            :ref="`checkboxes${item[props.key]}`"
                            @click="check(item)"
                        ></van-checkbox>
                    </p>
                </div>
            </div>
            <v-popup-projectItem
                ref="projectItem"
                v-show="scopes[index]"
                :firstIndex="`${firstIndex}.${index + 1}`"
                :data="item[props.children]"
                v-bind="$props"
                @check="check"
                v-on="$listeners"
            ></v-popup-projectItem>
        </li>
    </ul>
</template>

<script>
const CARETS = { open: 'caret-down', close: 'caret-right' }
import vPopupProjectItem from './v-popup-projectItem.vue'
export default {
    name: 'v-popup-projectItem',
    props: {
        data: { type: Array, default: () => [] },
        isSelect: { type: Boolean, default: false },
        props: {
            type: Object,
            default: () => {
                return { children: 'children', label: 'name', key: 'itemId' }
            },
        },
        result: { type: Array, default: () => [] },
        firstIndex: {
            type: String,
        },
    },
    components: {
        vPopupProjectItem,
    },
    data() {
        return {
            carets: CARETS,
            tapScopes: {},
            scopes: {},
            itemName: '',
        }
    },
    created() {},
    methods: {
        operation(type, treeNode) {
            this.$emit('operation', { type, treeNode })
        },
        changeStatus(index) {
            // 图标变化
            this.$set(
                this.tapScopes,
                index,
                this.tapScopes[index]
                    ? this.tapScopes[index] === 'open'
                        ? 'close'
                        : 'open'
                    : 'open'
            )
            // 展开闭合
            this.$set(this.scopes, index, this.scopes[index] ? false : true)
        },
        async check(item) {
            this.$emit('check', item)
        },
    },
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
@{deep} .van-checkbox {
    min-width: 20px;
    margin-left: 5px;
}
.treeMenu {
    padding-left: 20px;
    list-style: none;
    position: relative;
    user-select: none;
    color: #333;
}

.tree-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .tree-item-left {
        flex: 1;
    }

    .tree-item-right {
        width: 124px;
    }

    .add {
        font-size: 14px;
        color: #3385ff;
    }

    .delete {
        font-size: 14px;
        color: #f15a5a;
        margin-left: 10px;
    }

    @{deep} .f7-icons {
        font-size: 13px;
        margin-right: 5px;
    }
}

@{deep} .van-radio {
    min-width: 20px;
    margin-right: 5px;
}

.triangle {
    transition: all 0.1s;
    left: 6px;
    margin: 15px 0 0 0;
    position: absolute;
    cursor: pointer;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left: 8px solid grey;
}

.caret-down {
    transform: rotate(90deg);
    left: 2px;
    margin: 15px 0 0 0;
}

.checkbox-wrap {
    display: flex;
    align-items: center;
}

.checkbox {
    margin-right: 0.5rem;
}

.treeNode:hover,
.treeNode:hover > .operation {
    color: #3771e5;
    background: #f0f7ff;
}

.treeNode--select {
    background: #f0f7ff;
}

.treeNode:hover > .operation {
    opacity: 1;
}

p {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 10px 0;
}

p > .title {
    cursor: pointer;
    width: 90%;
}

a {
    color: cornflowerblue;
}

.operation {
    position: absolute;
    right: 0;
    font-size: 18px;
    opacity: 0;
}
</style>
